轮播图不同实现方法 以及 发布到Cocoapod

发表于   |   分类于

Demo地址
github

周末闲着无聊把使用两个UIImageView 以及使用一个UIImageView 来实现轮播图分别写了一下，顺便试了下发布到Cocoapod，总体来说还是很简单的，记录下流程。

两个UIImageView

原理和使用三个基本一样，没什么可以说的

使用的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
- (void)demo{
    JCCarouselView *bannerView = [[JCCarouselView alloc]initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 220)];
    [self.view addSubview:bannerView];
    bannerView.imageUrlArr = self.imageUrlArr;
    
    bannerView.placeholderImage = [UIImage imageNamed:@"placeholder"];
    
    //设置pagecontrol 图片
    bannerView.curPageControlImage = [UIImage imageNamed:@"Group"];
    bannerView.pageControlImage = [UIImage imageNamed:@"Group1"];
    
    //设置pagecontrol 颜色
    bannerView.pageControlColor = [UIColor whiteColor];
    bannerView.curPageControlColor = [UIColor redColor];
    
    bannerView.timeInterval = 4;
    bannerView.delegate = self;
    
    bannerView.clickBlock = ^(NSInteger index){
        NSLog(@"点击%ld张图片",index);
    };
}
- (void)carouselView:(JCCarouselView *)carouselView didSelectedAtIndex:(NSInteger)index{
    NSLog(@"点击%ld张图片",index);
}

一个UIImageView

主要原理是使用CATransition 这个类，往图片上添加转场效果。

先在图片上添加左滑以及右滑的手势

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- (UIImageView *)imageView{
    if (!_imageView) {
        _imageView = [[UIImageView alloc]initWithFrame:self.bounds];
        [self addSubview:_imageView];
        [_imageView setContentMode:UIViewContentModeScaleAspectFill];
        _imageView.clipsToBounds = YES;
        _imageView.userInteractionEnabled = YES;
        
        UISwipeGestureRecognizer *leftSwipeGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
        leftSwipeGesture.direction = UISwipeGestureRecognizerDirectionLeft;
        [_imageView addGestureRecognizer:leftSwipeGesture];
        
        UISwipeGestureRecognizer *rightSwipeGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
        rightSwipeGesture.direction = UISwipeGestureRecognizerDirectionRight;
        [_imageView addGestureRecognizer:rightSwipeGesture];
    }
    return _imageView;
}

滑动的实现方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
-(void)transitionAnimation:(NSInteger)direction{
    CATransition *transition=[[CATransition alloc]init];
    transition.type= kCATransitionPush;//@"rippleEffect";
    
    BOOL right = YES;
    
    //设置子类型
    if (direction == JCCarouselDirectionLeft) {
        transition.subtype=kCATransitionFromRight;
        
    }else if (direction == JCCarouselDirectionRight) {
        transition.subtype=kCATransitionFromLeft;
        right = NO;
    }
    
    transition.duration = .25f;
    
    if (right) {
        self.curIndex=(_curIndex + 1) % self.imageUrlArr.count;
    }else{
        self.curIndex=(_curIndex - 1 + self.imageUrlArr.count) % self.imageUrlArr.count;
    }
    [self.imageView sd_setImageWithURL:self.imageUrlArr[self.curIndex]];
    [self.imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation"];
}

这种方法的局限在于不能跟随手势滑动，只要滑动就会立刻切换图片，实用性不大，不过了解下CATransition 这个类还是很有好处的。

发布到Cocoapod

1.打tag

1
2
git tag -a 1.0.0 -m"1.0.0"
git push --tags

2.创建项目的podspec文件

1
pod spec create JCCarouselView

这时会生成JCCarouselView.podspec 文件，这就相当于你的库的描述文件，语法参照这里填写即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Pod::Spec.new do |s|
  s.name         = "JCCarouselView"
  s.version      = "1.0.4"
  s.summary      = "两个UIImageView实现的轮播banner"
  s.homepage     = "https://github.com/JiachengZheng/JCCarouselView"
  s.license      = { :type => "MIT", :file => "FILE_LICENSE" }
  s.author       = { "zhengjiacheng" => "jiachengzheng@163.com" }
  s.platform     = :ios, "7.0"
  s.ios.deployment_target = "7.0"
  s.source       = { :git => 'https://github.com/JiachengZheng/JCCarouselView.git', :tag => s.version }
  s.source_files  = 'JCCarouselView/*.{h,m}'
  # s.resource  = "icon.png"
  # s.resources = "Resources/*.png"
  s.public_header_files = 'JCCarouselView/*.h'
  s.requires_arc = true
  # s.xcconfig = { "HEADER_SEARCH_PATHS" => "$(SDKROOT)/usr/include/libxml2" }
  s.dependency 'SDWebImage'
end

3.验证podspec文件

1
pod spec lint JCCarouselView.podspec

不知道为什么总会提示报错

1
2
3
4
5
6
7
8
9
10
Updating spec repo `master`
Validating podspec
 -> JCCarouselView (1.0.2)
    - ERROR | [iOS] xcodebuild: Returned an unsuccessful exit code. You can use `--verbose` for more information.
    - ERROR | xcodebuild:  /Users/zhengjiacheng/Library/Developer/Xcode/DerivedData/App-dvilxxenwfwalycxbchznfaznvzq/Build/Products/Release-iphonesimulator/JCCarouselView/JCCarouselView.framework/Headers/JCCarouselView.h:10:9: error: include of non-modular header inside framework module 'JCCarouselView.JCCarouselView' [-Werror,-Wnon-modular-include-in-framework-module]
    - NOTE  | xcodebuild:  /var/folders/8j/zd9r7fv92wz32qbj6dhk70n80000gn/T/CocoaPods/Lint/App/main.m:3:9: fatal error: could not build module 'JCCarouselView'
[!] The spec did not pass validation, due to 2 errors.
[!] The validator for Swift projects uses Swift 3.0 by default, if you are using a different version of swift you can use a `.swift-version` file to set the version for your Pod. For example to use Swift 2.3, run: 
    `echo "2.3" > .swift-version`.

后来改为

1
pod spec lint JCCarouselView.podspec --use-libraries

就可以了，不太知道原因。。。

如果出现

1
2
3
4
5
 -> JCCarouselView (1.0.2)
Analyzed 1 podspec.
JCCarouselView.podspec passed validation.

就代表成功了

4.上传podspec

首先需要注册

1
pod trunk register xxxxxx@gmail.com 'MrSong' --description='MrSong'

随后邮箱里会发确认邮件，确认以后就可上传了
可通过 pod trunk me 查看自己是否注册成功

之后就可以上传了，这一步可能会比较慢

1
pod trunk push JCCarouselView.podspec --use-libraries

后面还是加上了--use-libraries防止报错。。。

出现如下代码上传成功

1
2
3
4
5
6
🎉  Congrats
🚀  JCCarouselView (1.0.2) successfully published
📅  February 6th, 02:16
🌎  https://cocoapods.org/pods/JCCarouselView
👍  Tell your friends!

5.验证

1
pod search 'JCCarouselView'

大功告成！Enjoy!

Demo地址
github